<template>
    <div class="menu-wrapper">
        <el-menu
            :mode="menuMode"
            :default-active="currentKey"
            class="menu-box"
            :class="menuMode == 'vertical' ? 'vertical-menu' : 'horizontal-menu'"
        >
            <MenuItem :menu-data="menus" @clickItem="clickMenu" />
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore, usePermissionStore, useLayoutStore } from '@/stores/index.ts';
import MenuItem from './menuItem.vue';
const currentKey = ref('');
const menus = ref([]);
const permissionStoreData = usePermissionStore();
const layoutStoreData = useLayoutStore();
const userStoreData = useUserStore();
const { menuMode } = storeToRefs(layoutStoreData);
const { currentRole, getCurrentRole } = storeToRefs(userStoreData);
const router = useRouter();
const route = useRoute();
// 监听路由变化
watch(
    () => route.path,
    (newVal) => {
        highLightRoute();
    }
);
watch(getCurrentRole, (newVal) => {
    filterMenu();
    highLightRoute();
});
onMounted(() => {
    filterMenu();
    highLightRoute();
});

// 初始化菜单
const filterMenu = () => {
    const { permissionRoutes } = storeToRefs(permissionStoreData);
    const list = permissionRoutes.value;
    menus.value = list;
};
const clickMenu = (item: RouteItem) => {
    currentKey.value = item.path;
    router.push({ path: item.path });
};
const highLightRoute = () => {
    // 当二级菜单下有不展示的子级时，首次点击二级进行了重定向，故currentKey匹配不到，二级菜单未高亮
    if (route.meta.isHidden) {
        const list = route.fullPath.split('/');
        list.pop();
        list.shift();
        currentKey.value = '/' + list.join('/');
    } else {
        currentKey.value = route.path;
    }
};
</script>

<style lang="scss" scoped>
.menu-wrapper {
    width: 100%;
    .menu-box {
        width: 100%;
        border-right: none;
        background-color: var(--main-body-bg-color);
        :deep(.el-menu) {
            background-color: var(--main-body-bg-color);
        }
        :deep(.el-menu-item) {
            color: #fff;
        }
        :deep(.el-menu-item.is-active) {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
        :deep(.el-menu-item:hover) {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
        :deep(.el-sub-menu__title) {
            color: #fff;
        }
        :deep(.el-sub-menu__title:hover) {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
        :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
            color: var(--side-menu-bg-color);
            &:hover {
                color: #fff;
            }
        }
    }
    .horizontal-menu {
        border-bottom: none;
        .menu-item-wrapper {
            display: flex;
        }
    }
}
</style>

<style lang="scss">
.el-menu--horizontal .el-menu-item {
    &:not(.is-disabled):focus {
        color: #fff;
        background-color: var(--side-body-bg-color);
    }
}
.el-menu--horizontal .el-menu {
    .el-menu-item {
        &:hover {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
        &.is-active {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
    }
    .el-sub-menu__title {
        &:hover {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
    }
    .el-sub-menu.is-active > .el-sub-menu__title {
        color: var(--side-menu-bg-color);
        &:hover {
            color: #fff;
        }
    }
}
</style>
